import { Button, Input, Modal, Radio, Text } from "@nextui-org/react";
import { BASEURL } from "./config";
import { Notification } from "@douyinfe/semi-ui";
import { mutate } from "swr";

export default function EditStudent(props) {
    const {
      editDialogVisiable,
      setEditDialogVisiable,
      editDialogData,
      setEditDialogData,
    } = props;
  return (
    <Modal
      closeButton
      aria-labelledby="编辑学生信息"
      open={editDialogVisiable}
      onClose={() => setEditDialogVisiable(false)}
    >
      <Modal.Header>
        <Text id="modal-title" size={18}>
          <Text b size={18}>
            修改学生信息
          </Text>
        </Text>
      </Modal.Header>
      <Modal.Body>
        <Input
          color="primary"
          size="lg"
          label="届次"
          type="number"
          initialValue={editDialogData.year}
          readOnly
        />
        <Input
          color="primary"
          size="lg"
          label="班级"
          type="text"
          initialValue={editDialogData.class}
          readOnly
        />
        <Input
          color="primary"
          size="lg"
          label="学生姓名"
          type="text"
          initialValue={editDialogData.name}
          readOnly
        />
        <Radio.Group
          label="性别"
          value={editDialogData.sex}
          row
          size="sm"
          onChange={(e) =>
            setEditDialogData({
              ...editDialogData,
              sex: e,
            })
          }
        >
          <Radio value="男">男</Radio>
          <Radio value="女">女</Radio>
        </Radio.Group>
        <Input
          color="primary"
          size="lg"
          label="身份证号"
          type="text"
          initialValue={editDialogData.id_number}
          onChange={(e) => {
            setEditDialogData({
              ...editDialogData,
              id_number: e.target.value,
            });
          }}
        />
        <Input
          color="primary"
          size="lg"
          label="手机号"
          type="number"
          initialValue={editDialogData.phone_number}
          onChange={(e) => {
            setEditDialogData({
              ...editDialogData,
              phone_number: e.target.value,
            });
          }}
        />
      </Modal.Body>
      <Modal.Footer>
        <Button auto flat onClick={() => setEditDialogVisiable(false)}>
          关闭
        </Button>
        <Button
          auto
          onClick={() => {
            fetch(
              `${BASEURL}/students/${editDialogData.year}/${editDialogData.class}/${editDialogData.name}`,
              {
                method: "PUT",
                headers: {
                  "Content-Type": "application/json",
                  Authorization: `Bearer ${localStorage.getItem("token")}`,
                },
                body: JSON.stringify({
                  id_number: editDialogData.id_number,
                  phone_number: editDialogData.phone_number,
                  sex: editDialogData.sex,
                }),
              }
            )
              .then((res) => res.json())
              .then((res) => {
                if (typeof res.detail === "undefined") {
                  Notification.success({
                    content: `修改成功`,
                  });
                } else {
                  Notification.error({
                    content: `修改失败 ${res.detail.msg}`,
                  });
                }
                mutate(`${BASEURL}/students`);
              })
              .catch((err) => {
                Notification.error({
                  content: `修改失败 ${err}`,
                });
              });
            setEditDialogVisiable(false);
            setEditDialogData({});
          }}
        >
          提交
        </Button>
      </Modal.Footer>
    </Modal>
  );
}
